<template>
  <div style="background-color: rgba(255, 255, 255, 1);height:100%">
    <header>
      <Row type="flex" justify="space-between">
        <Col span="8">
          <Row type="flex" justify="start">
            <div class="home-user">
              <span>
                <h3 style="margin-right:15px">{{bloc.form.nickname}}</h3>
              </span>
              <span>
                <p style="margin-right:15px">关联手机：{{bloc.form.phone}}</p>
                <p style="margin-right:15px">添加时间：{{getTimeStr(bloc.form.created)}}</p>
                <Button icon="ios-trash" @click="removeItem()">删除成员</Button>
                 </span>
              <span>
                <p style="margin-right:15px">体重：{{bloc.form.weight}}KG</p>
                <p style="margin-right:15px">身高：{{bloc.form.height}}CM</p>
                <p style="margin-right:15px">年龄：{{getYears(bloc.form.birthday)}}</p>
                <p>性别：{{bloc.form.sex === 'M' ? '男' : '女'}}</p>
              </span>
            </div>
          </Row>
        </Col>
        <Col span="4">
          <Row type="flex" class="user-device-box" justify="space-between" align="middle">
            <div>
              <!--              <Button-group>-->
              <!--                <Button icon="chevron-left">-->
              <!--                </Button>-->
              <!--                <Button icon="chevron-right">-->
              <!--                </Button>-->
              <!--              </Button-group>-->
<!--              <Button-group>-->
<!--                <i-button>-->
<!--                  <Icon type="ios-arrow-back"></Icon>-->
<!--                </i-button>-->
<!--                <i-button>-->
<!--                  <Icon type="ios-arrow-forward"></Icon>-->
<!--                </i-button>-->
<!--              </Button-group>-->
            </div>
          </Row>
        </Col>
      </Row>
    </header>
    <div class="contain">
      <div class="nav">
        <h3 :class="{active: selectType===3}" @click="selectType=3">健康数据</h3>
        <h3 :class="{active: selectType===4}" @click="selectType=4">按摩椅使用日志</h3>
      </div>
      <div class="massage" v-if="selectType===3">
        <Massage :affiliateId="idx"/>
      </div>
      <div class="massageLog" v-if="selectType===4">
        <MassageLog :affiliateId="idx"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {ChartBar} from '@/component/charts';
  import Massage from '@/view/member/component/Massage.vue'
  import MassageLog from '@/view/member/component/MassageLog.vue'
  import { Route } from 'vue-router';
  import {AffliateDetailBloc} from '@/view/member/bloc/AffliateDetailBloc';
  import {formatDate} from '@/base/util/Dates';
  import moment from 'moment';
  import {Affiliate} from '@/base/model/Affiliate';

  @Component({
    components: {ChartBar, Massage, MassageLog}
  })
  export default class extends Vue {
    beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
      next(vm => {
        vm.bloc.load(vm.idx);
      });
    }

    get idx() {
      return Number(this.$route.params.id);
    }

    selectType = 3;
    bloc: AffliateDetailBloc = new AffliateDetailBloc();

    removeItem() {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除后将无法恢复！还要继续吗？',
        okText: '删除',
        cancelText: '取消',
        onOk: () => {
          this.bloc
            .removeItem(this.idx)
            .then(() => {
              this.$Message.success('删除成功');
              this.$router.push(`/member/detail/${this.bloc.form.memberId}`);
            })
            .catch((e) => {
              this.$Message.error('删除失败');
            });
        }
      });
    }

    getTimeStr(time: string) {
      return formatDate(new Date(time), 'yyyy-MM-dd hh:mm:ss')
    }

    getYears(time: string) {
      const currDate = moment(new Date());
      const birDate = moment(time);
      return Math.ceil(currDate.diff(birDate, 'years', true))
    }

    mounted() {
    }
  }
</script>
<style lang="less" scoped>
  header {
    height: 140px;
    width: 100%;
    font-size: 18px;
    padding: 25px 20px;
    border: 1px solid rgba(242, 242, 242, 1);

    .user-device-box > div {
      width: 120px;
    }

    .home-user {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 15px;
      color: #999;
      font-size: 14px;

      span {
        padding: 5px 0;
        display: flex;

      }
    }
  }

  .contain {
    margin: 20px 0;
    border: 1px solid rgba(242, 242, 242, 1);

    .nav {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      display: flex;
      justify-content: flex-start;

      h3 {
        padding: 0 20px;
        cursor: pointer;
      }
    }

    .bottom {
      padding: 0px 30px 30px 30px;
    }

    .top {
      width: 100%;
      height: 500px;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;
      background-color: rgba(255, 255, 255, 1);
    }
  }

  .active {
    border-bottom: 1px solid #559DF9;
    color: #559DF9;
  }
</style>
